<template>
    <div class="container">
        <!-- 头部组件 -->
        <header>首页头部</header>
        <main>
            <MyLunbo :bannerList="bannerList" />
            <!-- 轮播组件 -->
            <MyNav :navList="navList" />
            <!-- nav组件 -->
            <MySkill :seckillList="seckillList" />
            <!-- 秒杀组件 -->
            <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <ProList :pro="pro" />
            </van-list>
            <!-- 产品列表组件 -->
        </main>
    </div>
</template>

<script>
import { getBannerList, getSeckilllist, getProList } from '@/apis/goods/index'
import MyLunbo from "./components/MyLunbo.vue";
import MyNav from "./components/MyNav.vue";
import MySkill from "./components/MySkill.vue";
import ProList from "./components/ProList.vue";
export default {
    name: 'HomeView',
    data() {
        return {
            bannerList: [],
            navList: [
                { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
                { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
                { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png' },
                { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
                { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png' },
                { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png' },
                { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png' },
                { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png' },
                { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png' },
                { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' }
            ],
            seckillList: [],
            pro: [],
            // 记录列表是否处于加载中状态, false表示未加载，true表示正在加载
            loading: false,
            // 记录是否全部加载完成，false表示未完成，true表示已完成
            finished: false,
            count:1,
            limitNum:10
        }
    },
    methods: {
        async fetchBannerList() {
            const res = await getBannerList()
            this.bannerList = res.data
        },
        onLoad() {
            //如果设置 immediate-check, 滚动到底部会执行此函数。因为下面已经请求过10条数据，所以这里 设置immediate-check="false"
            console.log(11);
            // 加载下一页数据
            getProList({ count: this.count, limitNum: this.limitNum }).then(res => {
                //模拟网络延迟
                setTimeout(() => {
                    //假设返回的数据在res.data中
                    const newData = res.data
                    //判断是否还有数据可加载
                    if (newData.length > 0) {
                        this.pro = this.pro.concat(newData)
                        this.count++
                        this.loading = false //数据加载完成，设置loading为false
                    } else {
                        this.finished = true //没有更多数据，设置finished为true
                    }
                }, 1000)
            })
        },
    },
    mounted() {
        this.fetchBannerList()
        getSeckilllist().then(res => {
            this.seckillList = res.data.data
        }),
        // 请求第一次的数据
        getProList({ count: this.count, limitNum: this.limitNum }).then(res => {
            this.pro = res.data
        })
    },
    components: {
        MyLunbo,
        MyNav,
        MySkill,
        ProList
    }
}
</script>

<style scoped></style>